<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="/api-uaa/assets/libs/layui/css/layui.css"/>
</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin-top: 100px;">
        <div class="layui-col-md4 layui-col-md-offset4">
            <!-- 登录选择 -->
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">账号登录</li>
                    <li>扫码登录</li>
                    <li>手机短信</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="/user/login" method="post">
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 100%">
                                    <input type="text" name="username" value="admin" lay-reqtext="输入账号/邮箱"
                                           lay-verify="username"
                                           autocomplete="off"
                                           placeholder="登录账号/邮箱" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 100%">
                                    <input type="password" name="password" value="admin" lay-reqtext="输入密码"
                                           lay-verify="password"
                                           autocomplete="off"
                                           placeholder="密码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="validCode" lay-reqtext="输入验证码" lay-verify="validCode"
                                               autocomplete="off"
                                               placeholder="验证码" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <img src="" id="validCode" alt="验证码">
                                    <input type="hidden" id="deviceId" name="deviceId">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 100%;text-align: center">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="accountFilter">登录
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        扫码登录
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form" action="/user/login" method="post">
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 100%">
                                    <input type="text" name="username" lay-verify="username" autocomplete="off"
                                           placeholder="手机号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="validCode" lay-reqtext="输入验证码" lay-verify="validCode"
                                               autocomplete="off"
                                               placeholder="验证码" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn layui-btn-primary">发送验证码</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 100%;text-align: center">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">登录
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/api-uaa/js/jquery.min.js"></script>
<script type="text/javascript" src="/api-uaa/assets/libs/layui/layui.js"></script>
<script type="text/javascript">
    let uuid = localStorage.getItem("uuid");
    if (!uuid) {
        uuid = randomString(16)
        localStorage.setItem("uuid", uuid);
    }
    $("#deviceId").val(uuid)

    $("#validCode").click(function () {
        // 点击就刷新code，可以控制下调用次数，避免过多调用
        $(this).attr("src", this.src + "?t=" + Math.random())
    })
    layui.use(['layer', 'form', 'element'], function () {
        const layer = layui.layer, form = layui.form;
        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length < 5 || value.length > 20) {
                    return '账号需要 5~20 字符';
                }
            },
            password: [/^[\S]{5,32}$/, '密码必须 5~32 位，且不能出现空格'],
            validCode: [/^[\S]{4}$/, '4 位验证码，不能出现空格']
        });
        //监听提交
        form.on('submit(accountFilter)', function (data) {
            // 目前只能自动提交，如果使用post提交会有cors问题。。。
            return true;
        });

        // 验证码生成
        $("#validCode").attr("src", `http://127.0.0.1:9900/api-uaa/validata/code/` + uuid);

    });

    function randomString(e) {
        //形参e,需要产生随机字符串的长度
        //如果没有传参，默认生成32位长度随机字符串
        e = e || 32;
        //模拟随机字符串库
        let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
            a = t.length,//字符串t的长度，随机数生成最大值
            n = "";
        for (let i = 0; i < e; i++) {
            //随机生成长度为e的随机字符串拼接
            n += t.charAt(Math.floor(Math.random() * a));
        }
        //返回随机组合字符串
        return n
    }
</script>
</body>
</html>
